@charset "utf-8";
@import "reset";

// 旋转
@keyframes xuan1{
	from{transform: rotateZ(0);}
	to{transform: rotateZ(360deg);}
}
@keyframes xuan2{
	from{transform: rotateZ(30deg);}
	to{transform: rotateZ(390deg);}
}
@keyframes xuan3{
	from{transform: rotateZ(60deg);}
	to{transform: rotateZ(420deg);}
}
@keyframes xuan4{
	from{transform: rotateZ(90deg);}
	to{transform: rotateZ(450deg);}
}
@keyframes xuan5{
	from{transform: rotateZ(120deg);}
	to{transform: rotateZ(480deg);}
}
@keyframes xuan6{
	from{transform: rotateZ(150deg);}
	to{transform: rotateZ(510deg);}
}

// 加载页
.loadingPage{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	.loading{
		color: white;
		position: absolute;
		bottom: 3%;
		left: 1%;
	}
	.background_load{
		width: 100%;
		height: 100%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.sign{
		width: 130px;
		height: 100px;
		position: absolute;
		bottom: 0;
		left: 28%;
		animation:bounceInUp 1s linear;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.skip{
		width: 80px;
		height: 50px;
		position: absolute;
		bottom: 15px;
		right: 15px;
		animation:swing 1s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

// 首页
.homepage{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
	background-color: white;
	.xz_box{
		.xzbox{
			width: 0;
			height: 0;
			border-top: 80px solid transparent;
			border-bottom: 80px solid transparent;
			border-left: 50rem solid #555;
			border-right: 50rem solid #555;
			position: absolute;
			top: -999px;
			left: -999px;
			right: -999px;
			bottom: -999px;
			margin: auto;
		}
		.xz_box1{
			transform-origin: center;
			animation: xuan1 3s linear infinite;
		}
		.xz_box2{
			transform-origin: center;
			animation: xuan2 3s linear infinite;
		}
		.xz_box3{
			transform-origin: center;
			animation: xuan3 3s linear infinite;
		}
		.xz_box4{
			transform-origin: center;
			animation: xuan4 3s linear infinite;
		}
		.xz_box5{
			transform-origin: center;
			animation: xuan5 3s linear infinite;
		}
		.xz_box6{
			transform-origin: center;
			animation: xuan6 3s linear infinite;
		}
	}
	.logo_img{
		width: 365px;
		height: 230px;
		position: absolute;
		top: 10px;
		right: 0;
		z-index: 2;
		animation: bounceInUp 2s linear;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.zb_img{
		width: 350px;
		height: 250px;
		position: absolute;
		top: 29%;
		left: 13px;
		z-index: 1;
		animation: pulse 1s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.wh_img{
		width: 135px;
		height: 180px;
		position: absolute;
		bottom: 162px;
		left: 10px;
		z-index: 1;
		animation: swing 1s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.hr1_img{
		width: 170px;
		height: 285px;
		position: absolute;
		bottom: 63px;
		left: 15px;
		z-index: 2;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.hr2_img{
		width: 170px;
		height: 350px;
		position: absolute;
		bottom: 41px;
		right: 0;
		z-index: 2;
		animation: zoomInLeft 2s linear;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.but_img{
		width: 195px;
		height: 65px;
		position: absolute;
		bottom: 10px;
		left: 90px;
		z-index: 2;
		border: none;
		animation: tada 1s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

// 金曲页
.jq_box{
	overflow: hidden;
	position: relative;
	.beijin_box01{
		width: 100vw;
		height: 100vh;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.text_img01{
		width: 330px;
		position: absolute;
		top: 96px;
		left: 6px;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.rw_img01{
		width: 315px;
		position: absolute;
		top: 158px;
		left: 42px;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.cc_img{
		width: 100%;
		position: absolute;
		top: 58%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

//摇滚
.yg_box{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-color: white;
	.ygbj_box{
		.ygbox{
			width: 0;
			height: 0;
			border-top: 40px solid transparent;
			border-bottom: 40px solid transparent;
			border-left: 25rem solid #555;
			border-right: 25rem solid #555;
			position: absolute;
			top: -999px;
			left: -999px;
			right: -999px;
			bottom: -999px;
			margin: auto;
		}
		.ygbj_box1{
			// -webkit-transform-origin: center;
			transform-origin: center;
			// animation: lgs6 3s linear infinite;
			-webkit-animation: xuan1 3s linear infinite;
		}
		.ygbj_box2{
			// -webkit-transform-origin: center;
			transform-origin: center;
			// animation: lgs6 3s linear infinite;
			-webkit-animation: xuan2 3s linear infinite;
		}
		.ygbj_box3{
			// -webkit-transform-origin: center;
			transform-origin: center;
			// animation: lgs6 3s linear infinite;
			-webkit-animation: xuan3 3s linear infinite;
		}
		.ygbj_box4{
			// -webkit-transform-origin: center;
			transform-origin: center;
			// animation: lgs6 3s linear infinite;
			-webkit-animation: xuan4 3s linear infinite;
		}
		.ygbj_box5{
			// -webkit-transform-origin: center;
			transform-origin: center;
			// animation: lgs6 3s linear infinite;
			-webkit-animation: xuan5 3s linear infinite;
		}
		.ygbj_box6{
			// -webkit-transform-origin: center;
			transform-origin: center;
			// animation: lgs6 3s linear infinite;
			-webkit-animation: xuan6 3s linear infinite;
		}
	}
	.db_img{
		width: 100%;
		height: 110px;
		position: absolute;
		top: 49%;
		z-index: 2;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.left_img{
		width: 213px;
		height: 260px;
		position: absolute;
		top: 152px;
		left: 0;
		animation: bounce 0.75s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.right_img{
		width: 213px;
		height: 260px;
		position: absolute;
		top: 144px;
		right: 0;
		animation: bounce 0.75s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.dg_img1{
		width: 90%;
		height: 120px;
		position: absolute;
		left: 10px;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.mw_img{
		width: 50%;
		height: 50%;
		position: absolute;
		top: 95px;
		left: 85px;
		z-index: 3;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

// 澡堂
.zt_box{
	width: 100vw;
	height: 100vh;
	position: relative;
	.ztbj_img{
		width: 100vw;
		height: 100vh;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ztcd_img{
		position: absolute;
		top: 0;
		left: 0;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ztdb_img{
		position: absolute;
		top: 45%;
		left: 0;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ztdb1_img{
		width: 56%;
		height: 25%;
		position: absolute;
		top: 37%;
		right: 0;
		z-index: 4;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ztdb2_img{
		width: 55%;
		height: 25%;
		position: absolute;
		top: 30%;
		left: 0;
		z-index: 2;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ztfz_img{
		width: 80%;
		height: 49%;
		position: absolute;
		top: 16%;
		right: 8%;
		z-index: 3;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ztmn_img{
		width: 100%;
		height: 40%;
		position: absolute;
		top: 15%;
		left: 0;
		z-index: 1;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

//小车
.xc_box{
	width: 100vw;
	height: 100vh;
	position: relative;
	.xcbj_img{
		width: 100vw;
		height: 100vh;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.xcwz_img{
		width: 67%;
		height: 27%;
		position: absolute;
		top: 8%;
		left: 8%;
		animation: pulse 0.75s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.xcqc_img{
		position: absolute;
		top: 30%;
		left: 0;
		animation: shake 3s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

//老头
.lg_box{
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	.lgbj_img{
		width: 100vw;
		height: 100vh;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.lgcd_img{
		width: 100%;
		height: 25%;
		position: absolute;
		top: 0;
		right: -29%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.lglt_img{
		width: 80%;
		height: 65%;
		position: absolute;
		top: 7%;
		left: 6%;
		z-index: 2;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.lghd_img{
		width: 100%;
		height: 25%;
		position: absolute;
		top: 41%;
		right: 0;
		z-index: 1;
		animation: pulse 0.75s linear infinite;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

//表白
.bb_box{
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-color: white;
	.bbbj_img{
		width: 100vw;
		height: 100vh;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.bbwz_img{
		width: 70%;
		height: 25%;
		position: absolute;
		top: 1%;
		left: 2%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.bbqg_img{
		width: 100%;
		height: 40%;
		position: absolute;
		top: 28%;
		left: 3%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.bbcy_img{
		width: 30%;
		height: 4%;
		position: absolute;
		top: 34%;
		left: 37%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.bblc_img{
		width: 50%;
		height: 60%;
		position: absolute;
		top: 10%;
		right: 0;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}

// 选项盒子
.xx_box{
	width: 100vw;
	height: 100vh;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	.xxxz_img{
		width: 20%;
		height: 33%;
		position: absolute;
		bottom: 2%;
		right: 0;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.xxA_img{
		width: 75%;
		height: 10%;
		position: absolute;
		bottom: 22%;
		left: 2%;
		background-image: url(../images/xuanxian_A.png);
		background-size: 100% 100%;
		padding-top: 20px;
		padding-left: 70px;
	}
	.xxB_img{
		width: 75%;
		height: 10%;
		position: absolute;
		bottom: 12%;
		left: 2%;
		background-image: url(../images/xuanxian_B.png);
		background-size: 100% 100%;
		padding-top: 20px;
		padding-left: 70px;
	}
	.xxC_img{
		width: 75%;
		height: 10%;
		position: absolute;
		bottom: 2%;
		left: 2%;
		background-image: url(../images/xuanxian_C.png);
		background-size: 100% 100%;
		padding-top: 20px;
		padding-left: 70px;
	}
	.xx_D{
		position: absolute;
		bottom: 28%;
		right: 7%;
	}
}

//轮播图
.swiper-container{
	position: absolute;
	top: 0;
	left: 0;
}

//结束页面
.overBox{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	z-index: 4;
	.overBj_img{
		width: 100vw;
		height: 100vh;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.oyh_img{
		width: 40%;
		height: 10%;
		position: absolute;
		top: 1%;
		left: 2%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.olg_img{
		width: 40%;
		height: 8%;
		position: absolute;
		top: 1%;
		right: 2%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.oxz_img{
		width: 32%;
		height: 21%;
		position: absolute;
		top: 10%;
		left: 34%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ocj_img{
		width: 45%;
		height: 10%;
		position: absolute;
		top: 31%;
		left: 29%;
		background-image: url(../images/chengji.png);
		background-size: 100% 100%;
		font-size: 25px;
		padding-top: 20px;
		padding-left: 24px;
	}
	.ocf_img{
		width: 93%;
		height: 15%;
		position: absolute;
		top: 42%;
		left: 3%;
		background-image: url(../images/chaofen.png);
		background-size: 100% 100%;
		padding: 30px;
	}
	.ozl_img{
		width: 45%;
		height: 10%;
		position: absolute;
		bottom: 32%;
		left: 4%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.ofx_img{
		width: 45%;
		height: 10%;
		position: absolute;
		bottom: 32%;
		right: 4%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.opm_img{
		width: 90%;
		height: 30%;
		position: absolute;
		bottom: 1%;
		left: 4%;
		>img{
			width: 100%;
			height: 100%;
		}
	}
}







